<template>
	<el-container>
		<el-aside width="200px" style="background-color: #f2f7ff;">
			<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
			  <el-radio-button :label="false" style="width: 100px;"><i style="width: 100px;height: 40px;display: flex;justify-content: center;align-items: center;font-size: 30px;" class="el-icon-s-unfold"></i></el-radio-button>
			  <el-radio-button :label="true" style="width: 100px;"><i style="width: 100px;height: 40px;display: flex;justify-content: left;align-items: center;font-size: 30px;" class="el-icon-s-fold"></i></el-radio-button>
			</el-radio-group>
			<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"
			router="true">
			  
			  
			  <el-menu-item index="/EnteroriseService.vue">
			    <i class="el-icon-user"></i>
			    <span slot="title">企业服务</span>
			  </el-menu-item>
			  <el-menu-item index="/Cooperate.vue">
			    <i class="el-icon-menu"></i>
			    <span slot="title">商务合作</span>
			  </el-menu-item>
			  <el-menu-item index="/ContactUs.vue">
			    <i class="el-icon-phone"></i>
			    <span slot="title">联系我们</span>
			  </el-menu-item>
			  <el-menu-item index="/CommonProblem.vue">
			    <i class="el-icon-tickets"></i>
			    <span slot="title">常见问题</span>
			  </el-menu-item>
			  
			</el-menu>
		</el-aside>
		<!-- 右侧主区域 -->
		    <el-container class="aa">
		        <!-- 头部区域 -->
		        <el-header>
		            <div><strong>关于我们</strong></div>		            
		        </el-header>
		        <!-- 中间区域 -->
		        <el-main>
		            <div style="width: 1200px; height: 635px;border: 1px">
		                <router-view></router-view>
		            </div>
					
		        </el-main>
		        <!-- 底部区域 -->
		        <!-- <el-footer>大事件 ©2023 Created by </el-footer> -->
		    </el-container>
		
	</el-container>
</template>

<script>
	export default {
	    data() {
	      return {
	        isCollapse: true
	      };
	    },
	    methods: {
	      handleOpen(key, keyPath) {
	        console.log(key, keyPath);
	      },
	      handleClose(key, keyPath) {
	        console.log(key, keyPath);
	      }
	    }
	  }
	
</script>

<style>
	@import url("//unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css");
	.el-menu-vertical-demo:not(.el-menu--collapse) {
	    width: 200px;
	    min-height: 200px;
	  }
	.el-header {
	    background-color: #ffffff;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;	    
	}
	.layout-container {
	    height: 100vh;	
	    .el-aside {
	        background-color: #232323;
	        .el-menu {
	            border-right: none;
	        }
	    }
		}
	
	.aa{
		background-image: url('image/beijing.jpg');
		background-size:100%;
	}
	
</style>